import React, { useEffect, useState } from 'react';
import service from '../../../api'
import { useNavigate } from 'react-router-dom'
import * as echarts from 'echarts';
import "./Gaikuo.scss"
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface Props {

}

interface DataType {
    img: string;
}
function Gaikuo(props: Props) {
    var myChart: any = null;
    var myStudy: any = null;
    var myFangwen: any = null;
    var myMoney: any = null;

    const navigate = useNavigate()//路由

    let [list, setlist] = useState([]);//双线echarts。
    let [yonghu, setyonghu] = useState([]);//访问用户量echarts。
    let [xiao, setxiao] = useState([]);//访问用户量echarts。
    let [wupin, setwupin] = useState([]);//访问用户量echarts。



    //支付金额echarts
    const paylist = async () => {
        const res = await service.home.index_pay();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        let blue = res.data.map((item: any) => {
            return item.blue
        })
        let yellow = res.data.map((item: any) => {
            return item.yellow
        })
        let kedu = res.data.map((item: any) => {
            return item.kedu
        })

        draw(blue, yellow, kedu);
        //实例化echarts

        setlist(res.data)
    }



    //今日用户访问echarts
    const yonghufang = async () => {
        const res = await service.home.index_yonghu();
        console.log(res.data)
        res.data.map((item: any) => {
            item.key = item.id
        })

        let haha = res.data.map((item: any) => {
            return {
                name: item.zhanbi,
                value: item.shuliang,
            }
        })
        yong(haha);
        money(haha)
        //实例化echarts

        setyonghu(res.data)
    }


    //销售量TOP5课程
    const xiaoliang = async () => {
        const res = await service.home.index_xiaoliang();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        setxiao(res.data)
    }
    //销售量TOP5课程
    const xiao_wupin = async () => {
        const res = await service.shuju.shuju_wuping();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })
        setwupin(res.data)
    }


    useEffect(() => {
        myChart = echarts.init(document.getElementById('charts') || document.body);
        myFangwen = echarts.init(document.getElementById('fangwen') || document.body);
        myMoney = echarts.init(document.getElementById('money') || document.body);
        paylist();
        yonghufang()
        xiaoliang()
        xiao_wupin()
    }, []);

    // 绘图支付
    var draw = (blue: any, yellow: any, kedu: any) => {
        // 绘制图表
        myChart.setOption({
            backgroundColor: "#fff",

            title: { //图表的标题
                text: '支付金额',
                top: 20,
                left: '30',
                textStyle: {
                    color: 'black',
                    fontSize: 20, // 务必记住设置文字大小只能是数字
                    lineHeight: 30,
                    fontWeight: 'lighter'
                }, // 主标题样式

                subtext: '今日支付金额（元）  昨日支付金额（元）\n    610,000                   549,000',
                x: 'center',

                subtextStyle: {
                    color: '#717171',
                    fontSize: 16,
                    lineHeight: 30,
                    fontWeight: 'normal'
                }, // 副标题样式
            },
            grid: {//图标标题之间的距离
                left: '3%',
                right: '5%',
                bottom: '15%',
                top: '30%',
                containLabel: true,
            },

            xAxis: { //x轴设置
                // data: xAxis
                data: kedu

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 50000,
                min: 0,
                splitNumber: 6,
                // data: yAxis,
                boundaryGap: [0.2, 0.2]
            }],

            legend: { //图例
                bottom: 15,
                left: 410,
                // data: ['饼图', '销量', '价格']
            },
            calculable: true,
            series: [ //数据系列
                {
                    name: '昨日',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: yellow,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'orange', //折线颜色
                        }
                    }

                },
                {
                    name: '今日',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: blue,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'blue', //折线颜色
                        }
                    }

                }

            ]
        });
    }
    //绘图用户访问
    var yong = (haha: any,) => {
        myFangwen.setOption({
            title: {
                text: '今日新用户访问量占比',
                top: 20,
                left: '30',
            },
            graphic: [{ //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: '42%',
                top: '43%',
                style: {
                    text: '1000\n总访问量',
                    textAlign: 'center',
                    fill: '#1E7CE8', //文字的颜色
                    fontSize: 22,
                    lineHeight: 26,
                }
            }],
            legend: { //图例
                // bottom: 15,
                left: 320,
                top: 10
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    },
                    data: haha
                }
            ]
        });

    }
    //绘图支付金额占比
    var money = (haha: any,) => {
        myMoney.setOption({
            title: {
                text: '支付金额占比',
                top: 20,
                left: '30',
            },
            graphic: [{ //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: '42%',
                top: '43%',
                style: {
                    text: '10000\n总额(元)',
                    textAlign: 'center',
                    fill: '#1E7CE8', //文字的颜色
                    fontSize: 22,
                    lineHeight: 26,
                }
            }],
            legend: { //图例
                left: 320,
                top: 10
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    },
                    data: haha
                }
            ]
        });

    }

    const columns: ColumnsType<DataType> = [
        {
            title: '排名',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '课程信息',
            dataIndex: 'img',
            key: 'img',
            width: "50px",
            render: (_, record) => <img src={record.img} />,//动态渲染标签/组件
        },
        {
            title: '',
            dataIndex: 'kong',
            key: 'kong',
        },
        {
            title: '访问量',
            key: 'liang',
            dataIndex: 'liang',
        },
        {
            title: '支付量',
            key: 'payliang',
            dataIndex: 'payliang',
        },
        {
            title: '支付转换率',
            key: 'zhuan',
            dataIndex: 'zhuan',
        },

    ];
    return (
        <div className='gaikuo'>
            <div className="top">
                <div className="shang">
                    <h2>系统首页 <span>更新时间：2新客户1/09/09 10:00</span></h2>
                </div>
                <div className="xia">
                    <div className="one">
                        <p>访客数</p>
                        <h2>125,560</h2>
                        <p>较昨日 &emsp;▲ 12%</p>
                    </div>
                    <div className="one">
                        <p>付费用户数</p>
                        <h2>26,560</h2>
                        <p>较昨日 &emsp;▲ 6%</p>
                    </div>
                    <div className="one">
                        <p>浏览量</p>
                        <h2>46,5600</h2>
                        <p>较昨日 &emsp;▲ 5%</p>
                    </div>
                    <div className="one">
                        <p>支付订单数</p>
                        <h2>5600</h2>
                        <p>较昨日 &emsp;▼ 8%</p>
                    </div>
                </div>

            </div>
            <div id="charts"></div>
            <div className="big_box">
                <div className="left">
                    <div className="geshang">
                        <Table columns={columns} dataSource={xiao}>
                        </Table>
                    </div>
                    <div className="gexia">
                        <div id='money'></div>
                    </div>
                </div>
                <div className="right">
                    <div className="geshang">
                        <Table columns={columns} dataSource={wupin}>
                        </Table>
                    </div>
                    <div className="gexia">
                        <div id='fangwen'></div>
                    </div>
                </div>

            </div>
        </div>
    );
}

export default Gaikuo;